<template>
  <div class="home-ad">

    <el-container class="el-container">
      <el-aside style="height: 100%;" :width="isCollapse ? '60px' : '200px'">

        <div class="logo">
          <img src="/src/assets/logo.png" alt=""></img>
          <h5 class="mb-2 py-2 text-light-50">GGboy平台</h5>

        </div>
        <el-menu background-color="#000" class="el-menu-vertical-demo elmenu" :default-active="$route.path"
          text-color="#fff" router unique-opened :collapse="isCollapse" :collapse-transition="false">
          <TreeMeun :userMenu="userMenu" />
        </el-menu>

      </el-aside>
      <el-container>
        <el-header>
          <div class="flexbox">
            <div>
              <el-icon @click="isCollapse = !isCollapse" style="cursor: pointer;" class="iconColor">
                <component :is="isCollapse ? 'Expand' : 'Fold'"></component>
              </el-icon>
            </div>
            <div class="iconbox">
              <el-icon class="iconColor" :class="isRotate ? 'animate-spin' : ''" @click="changeIsRotate">
                <Refresh />
              </el-icon>
              <el-icon class="iconColor" @click="toggle" style="cursor: pointer;">
                <component :is="isFullscreen ? 'Aim' : 'FullScreen'"></component>
              </el-icon>
              <el-icon>
                <el-switch @change="toggleDark" v-model="value1" :active-action-icon="Moon"
                  :inactive-action-icon="Sunny" class="margin"
                  style="--el-switch-on-color:#000 ; --el-switch-off-color: #999;" />
              </el-icon>
              <el-badge is-dot class="item">
                <el-icon>
                  <Bell :icon="Share" />
                </el-icon>
              </el-badge>
              <el-dropdown :hide-on-click="false" style="cursor: pointer;">
                <span class="el-dropdown-link">
                  {{ store.userInfo.userName }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>手机：{{ store.userInfo.userEmail }}</el-dropdown-item>
                    <el-dropdown-item @click="drawer2 = true">设置</el-dropdown-item>
                    <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-drawer v-model="drawer2" :direction="direction">
                <template #header>
                  <h4>主题</h4>
                </template>
                <template #default>
                  <div class="demo-color-block">
                    <span class="demonstration">请选择</span>
                    <el-color-picker v-model="color1" @change="colorChange" />
                  </div>
                </template>
                <template #footer>
                  <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                  </div>
                </template>
              </el-drawer>
            </div>
          </div>
        </el-header>
        <el-main>
          <TabsTree />
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Api from './../api/index';
import TreeMeun from '../components/TreeMeun.vue';
import { useFullscreen, useDark, useToggle } from '@vueuse/core'
// import { useRouter } from 'vue-router';
//引入小图标黑暗模式
import { Moon, Sunny } from '@element-plus/icons-vue'
import { Share } from '@element-plus/icons-vue';
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
import router from '../router';
import { loginStore } from '../store';
import { ressetRouter } from '../router/index'
const store = loginStore()

const value1 = ref(true) //切换暗黑模式
const color1 = ref('#409EFF')

// const router = useRouter();
let userMenu: any = ref([])
let isCollapse = ref(false); //申明折叠图标效果
// ... existing code ...
// const getMenuList = async () => {
//   const res: any = await Api.getMenuListAPI();
//   // console.log("res", res);
//   userMenu.value = res;
// };
// getMenuList();

//权限列表
const getmenupermissionlist = async () => {
  let res: any = await Api.getMenuPermissionList();
  const {menuList,actionList} = res.data
  console.log("menuList", menuList);
  
  userMenu.value = menuList;
  window.sessionStorage.setItem('actionList', JSON.stringify(actionList))
};
getmenupermissionlist();

const isRotate = ref(false); // 刷新，设置小图标旋转
const changeIsRotate = () => {
  isRotate.value = !isRotate.value;
  setTimeout(() => {
    window.location.reload();
  }, 1000);
}
const { isFullscreen, toggle } = useFullscreen() //设置全屏

//暗黑模式
//方法一
// const toggleDark = ()=>{
//   document.documentElement.classList.toggle('dark')
// }

//方法二
const isDark = useDark()
const toggleDark = useToggle(isDark)

//登录退出
const loginOut = () => {
  router.push('/LoginAd');
  store.clearUserInfo()
  ressetRouter()
  router.addRoute(
    {
      path: '/',
      name: 'HomeAd',
      redirect: '/LoginAd',
      component: () => import('@/views/HomeAd.vue'),
      children: [
        {
          path: '/Welcome',
          name: 'WelcomeAd',
          meta: { title: '欢迎' },
          component: () => import('@/views/WelcomeAd.vue'),
        },
      ]
    }
  )

}

//抽屉主题
const tempColor = ref('') // 临时存储选择的颜色
//变量前缀
const colorChange = (e: any) => {
  //e就是选择的颜色
  tempColor.value = e
}

//抽屉
const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const cancelClick = () => {
  drawer2.value = false
}
const confirmClick = () => {
  ElMessageBox.confirm(`确定更改吗?`)
    .then(() => {
      // 确认后再应用颜色
      const pre = "--el-color-primary"
      const el = document.documentElement;
      el.style.setProperty(pre, tempColor.value) // 设置颜色
      drawer2.value = false
    })
    .catch(() => {
      // 取消操作，恢复原来的颜色
      const pre = "--el-color-primary"
      const el = document.documentElement;
      el.style.setProperty(pre, color1.value)
      tempColor.value = color1.value
    })
}
// const goLoinAd = () => {
//   router.push('/login');
// };

// import axios from 'axios';

// // 发起 GET 请求
// axios.get('http://127.0.0.1:4523/m1/5673431-5354191-default/api/menu/list')
// .then(response => {
// console.log(response.data);
// userMenu.value = response.data
// })
// .catch(error => {
// console.error(error);
// });
</script>

<style scoped>
.home-ad {
  width: 100%;
  height: 100%;
}

.el-header,
.el-footer {
  /* background-color: #fff; */
  text-align: center;
  border-bottom: 1px solid #999;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside {
  background-color: #000000;
  line-height: 200px;
}


body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.mb-2 {
  height: 50px;
  line-height: 50px;
}

img {
  margin: 0 16px;
  width: 32px;
  height: 32px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 18px;
  height: 50px;
}

.flexbox {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.elmenu {
  border: #000 1px solid;
  /* background-color: #000; */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* .iconColor {
  color: #999;
} */

.margin {
  margin: 10px;
}

.iconbox {
  width: 200px;
  display: flex;
  justify-content: space-between;
}

.item {
  height: 20px;
}

.demo-color-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.demo-color-block .demonstration {
  margin-right: 16px;
}

:deep(:focus-visible) {
  outline: none;
}
</style>